import { Button, Tag, Space, Modal, message } from 'antd';
import { useNavigate, Link } from 'react-router-dom';
import { StarOutlined } from '@ant-design/icons';
export type QuestionType = {
  _id: string
  title: string
  answerCount: number
  isPublished: boolean
  createTime: string
  isCollect: boolean
}

type PropsType = {
  question: QuestionType
}

function QuesaItem({ question }: PropsType) {
  const [modal, contextHolder] = Modal.useModal();
  const [messageApi, messageHolder] = message.useMessage();

  const nav = useNavigate();

  function handleCopy() {
    modal.confirm({
      title: '提示',
      icon: null,
      content: '是否复制问卷？',
      okText: '确认',
      cancelText: '取消',
      onOk: () => {
        messageApi.open({
          type: 'success',
          content: '问卷已复制',
        });
      },
    });
  }

  function handleDelete() {
    modal.confirm({
      title: '提示',
      icon: null,
      content: '是否删除问卷？',
      okText: '确认',
      cancelText: '取消',
      onOk: () => {
        messageApi.open({
          type: 'success',
          content: '问卷已删除',
        });
      },
    });
  }

  return <div className="bg-#ffffff px-10px pt-10px pb-10px rd-4px mb-12px">
    <div className="flex items-center justify-between mb-10px pb-15px border-b-1px border-b-solid border-#dddddd">
      <Link className="color-#409EFF" to={`/question/edit/${question._id}`}>
        <Space>
          {question.isCollect ? <StarOutlined className="color-#db42a4" /> : null}
          {question.title}
        </Space>
        
      </Link>
      <div>
        <span className="mr-10px">{question.isPublished ? <Tag color="processing">已发布</Tag> : <Tag>未发布</Tag>}</span>
        <span className="mr-10px">答卷：{question.answerCount}</span>
        <span>{question.createTime}</span>
      </div>
    </div>
    <div className="flex items-center justify-between pt-10px">
      <div>
        <Button type="primary" className="mr-10px" onClick={() => nav(`/question/edit/${question._id}`)}>编辑问卷</Button>
        <Button disabled={!question.isPublished} onClick={() => nav(`/question/stat/${question._id}`)}>数据统计</Button>
      </div>
      <div>
        <Button className="mr-10px">{question.isCollect ? '取消标星' : '标星'}</Button>
        <Button className="mr-10px" onClick={handleCopy}>复制</Button>
        <Button danger onClick={handleDelete}>删除</Button>
        {contextHolder}
        {messageHolder}
      </div>
    </div>
  </div>
}

export default QuesaItem;